<template>
  <div>
  <my-dialog>
    <!-- 在两个标签之间写的代码，就是传递给插槽的结构 -->
    <!-- v-slot:title可以简写成#title -->
  <!-- <template v-slot:title>
      <h3 >添加图书</h3>
  </template> -->
  <!-- <h3 slot="title">老版本的具名插槽写法</h3> -->
  <template v-slot:content="{uname,age}">
    <form action="">
      <!-- 书名：<input type="text" :value="obj.uname"><br> -->
      <!-- 作者：<input type="text" :value="obj.age"><br> -->
      书名：<input type="text" :value="uname"><br>
      作者：<input type="text" :value="age"><br>
    </form>
  </template>
  <template #default>
    <button>确认添加</button>
    <button>取消</button>
  </template>
   
  </my-dialog>

  <!-- <my-dialog>
    <h3>提示</h3>
    <p>你确定要删除吗？</p>
    <button>确认</button>
    <button>取消</button>
  </my-dialog> -->

  <my-list :list="users">
    <template #default="{id}">
      <button @click="del(id)">删除</button>
    </template>
  </my-list>
  <my-list :list="goods">
    <template #default>
      <button>编辑</button>
      <button>查看详情</button>
    </template>
  </my-list>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
import MyList from './components/MyList.vue'
export default{
  components:{MyDialog,MyList},
  data(){
    return{
      users:[
        {id:2,name:'张三'},
        {id:6,name:'李四'},
        {id:8,name:'王五'},
      ],
      goods:[
        {id:1,name:'方便面'},
        {id:3,name:'火腿肠'},
        {id:5,name:'娃哈哈'},
      ]
    }
  },
  methods:{
    del(id){
      this.users=this.users.filter(item=>item.id!==id)
    }
  }
}
</script>